---
id: intro
title: Introduction
sidebar_label: Introduction
slug: /
---

<video class="intro_video" loop autoPlay muted>
    <source src="/img/dark_mode.mp4" type="video/mp4"/>
</video>


> FireCMS is an **open source headless CMS and admin panel** built by developers
> for developers.

:::warning
FireCMS 2.0 has been replaced by FireCMS 3.0. We encourage you to migrate to the
new version at this point.
The collections generated in FireCMS Cloud are synced automatically to the new
version, but not to versions 2.2 or below.
:::

FireCMS is a content management system (CMS) that is built on top of the
Firebase platform. It is a cloud-based system that allows users to manage and
publish content to their websites or applications. With FireCMS, users can
create and edit pages, upload and manage media files, and manage users and
permissions. FireCMS is designed to be easy to use and can be integrated with
other Firebase services, such as Firebase Authentication and Firebase Cloud
Functions, to provide additional features and functionality.

It generates **CRUD views** based on your configuration. It is easy to set up
for the straight forward cases and easy to extend and customise.

FireCMS does **not** enforce any data structure on your side, and works out of
the box with any project.

The goal of this CMS is to generate collection and form views that bind nicely
to the collection/document model. We have built in many basic (and not
so basic) use cases; but FireCMS is built with extensibility in mind, so it is
easy to create your custom form fields, or your complete views.

There are two ways to build top level views in FireCMS:

- By creating mapping configurations for **collections** (to datasource
collections, such as Firestore collections, with your schema).
The best way to get a grasp of how
this works is checking the [Quickstart](quickstart.mdx) and
[Collections](collections/collections.md)
documentation.
- Create **custom views** that sit in the main level of your navigation tree. In
this case you can build your custom React component and make use of the
internal components of the CMS as well as the provided hooks.
Check [Custom top level views](navigation/custom_top_level_views.mdx) for more
details

:::note Custom backend
FireCMS was built with Firebase/Firestore as the default backend, but nothing
stops you from implementing your own `DataSource`, `AuthController` and
`StorageSource` and override the default implementations.
:::

FireCMS works as a complete app that is in charge of creating the views that
you define based on your collections and entity schemas. It handles
navigation for you as well as authentication and login.

However, there is a lot of room to customization,
including [custom top level views](navigation/custom_top_level_views.mdx),
[custom entity views](collections/custom_entity_views.md),
and [custom fields](properties/custom_fields.md)
for your entity properties, in case the basic use cases we include don't suit
your needs.

In the simplest case, you will want to create some properties, include them
in an entity collection, include it in a collection and include that in a CMS
instance.

## FirebaseCMSApp

The entry point for setting up a FireCMS app based on Firebase is
the `FirebaseCMSApp`.
This component is in charge of building a full FireCMS instance, using Firebase
Auth,
Firestore, and Firebase Storage as backend services.

Internally it will create a `FireCMS` which holds the main state and
logic of the app, and create the app scaffold and routes.

:::note
It is also possible to use FireCMS by using lower level components and including
`FireCMS` in your code, even without using Firebase.
More details in the [Custom CMSApp](custom_cms_app.mdx) section
:::

You can find an example of a basic `FirebaseCMSApp` implementation in the
[quickstart section](quickstart.mdx)

### Core technologies

FireCMS is based on these great technologies:

- Typescript
- Firebase
- React
- React Router
- Material UI
- Formik + Yup

:::important
You can use this library as a full application, with routing enabled.
But if you need better customisation and to use the internal components, tweak
the
MUI theme, control the routes or replace the backend altogether
(including auth, storage and data), you can do it starting from version 1.0.0.
Check the details in the [Custom CMSApp](custom_cms_app.mdx) section
:::

## Firebase

If Firebase is your chosen backend:

* You need to enable the **Firestore** database in your Firebase project.
* If you want to have  **authentication** enabled in your CMS config, you need
to enable
the corresponding auth method in your project.
* Also, if you are using **storage** fields in your string properties, you need
to enable Firebase Storage.

More details in [Firebase setup section](firebase_setup.md).

## Deployment to Firebase hosting

If you are deploying this project to firebase hosting, and the app is properly
linked to it, you can omit the `firebaseConfig` specification, since it gets
picked up automatically.

More details in [the deployment section](deployment.md)

## Features

FireCMS has been meticulously crafted to make it incredibly easy for developers
to build a CMS/admin tool while offering an excellent data editing experience
and a user-friendly interface for marketers and content managers.

### 🏓 Exceptional Spreadsheet View

We've developed a highly efficient windowed **spreadsheet view** for
collections, allowing inline editing for most common fields, as well as popup
views for other cases and your custom field implementations.

Featuring **real-time** support, FireCMS is perfect for apps that require
constant updates. It also supports **text search** (through an external provider
like Algolia, if using Firestore), **filtering and sorting**, and **exporting**
data.

### ✨ Robust Forms

![fields](https://firecms.co/img/post_editing.png)

When editing an entity, FireCMS offers a nested system of side dialogs for
navigating through **subcollections** and accessing custom views (such as custom
forms or blog previews). This functionality can also be accessed
programmatically using the `useSideEntityController` hook.

FireCMS includes **over 15 built-in fields** with numerous customization and
validation options. The components have been carefully designed for an
outstanding user experience, including advanced features like **references** to
other collections, **markdown**, and **array reordering**.

For unsupported use cases, create your own **custom field** as a React
component.

FireCMS also supports **conditional fields** in forms, allowing you to define
rules for active fields based on your logic.

### 👮 Authentication, Permissions, and Role System

Define which navigation views users can see and the operations (create, edit,
delete) they can perform based on your role system. You can even configure this
on a per-entity or collection level.

By default, FireCMS supports all Firebase authorization mechanisms, but you can
implement your own.

### 🏹 Relational Support

Define references to entities in other collections and benefit from the
integrated reference fields and shortcuts.

You can also define subcollections at the entity level for nesting data in a
collection/document/collection model.

### 🆒 Real-Time Data

Every view in the CMS supports real-time data, making it suitable for displaying
constantly updated information.

Forms also support this feature, with any modified value in the database being
updated in any open form view as long as it hasn't been touched by the user.
This enables advanced cases where a Cloud Function is triggered after saving an
entity, modifying some values, and requiring real-time updates.

### 🗂️ File Storage

FireCMS supports uploading files to Firebase Storage out of the box and provides
specific fields for handling single and multiple file uploads, as well as
reordering.

You can replace the Firebase Storage implementation with your own.

### 🙌 Custom backend

FireCMS has a good separation of concerns. All the logic related to
Firebase/Firestore is abstracted away behind 3 interfaces: `DataSource`,
`StorageSource` and `AuthController`. This means you can extend or even
completely
replace those 3 implementations with your own.
